<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 style="margin-top: 0">仪表盘</h2>
      <p style="color: #86909c; margin-bottom: 20px;">查看系统整体状态和关键指标</p>
    </div>

    <div class="stats-row">
      <div class="stat-card">
        <div class="stat-title">总专家数</div>
        <div class="stat-value">124</div>
        <div class="stat-trend trend-up"><i class="fa fa-arrow-up"></i> 8.2% 较上月</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">评审项目数</div>
        <div class="stat-value">86</div>
        <div class="stat-trend trend-up"><i class="fa fa-arrow-up"></i> 12.3% 较上月</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">已完成评审</div>
        <div class="stat-value">62</div>
        <div class="stat-trend trend-up"><i class="fa fa-check-circle"></i> 72.1% 完成率</div>
      </div>

      <div class="stat-card">
        <div class="stat-title">待完成评审</div>
        <div class="stat-value">24</div>
        <div class="stat-trend trend-down"><i class="fa fa-clock-o"></i> 27.9% 未完成</div>
      </div>
    </div>

    <div class="card-container">
      <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
        <h3>各专业组评审进度</h3>
        <el-radio-group v-model="timeRange" size="small">
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
          <el-radio-button label="year">年</el-radio-button>
        </el-radio-group>
      </div>
      <el-row :gutter="20">
        <el-col :span="16">
          <canvas id="reviewProgressChart" height="300"></canvas>
        </el-col>
        <el-col :span="8">
          <canvas id="expertCategoryChart" height="300"></canvas>
        </el-col>
      </el-row>
    </div>

    <div class="card-container">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
        <h3>最近评审活动</h3>
        <el-button type="text" size="small">查看全部</el-button>
      </div>

      <el-table
          :data="recentActivities"
          border
          style="width: 100%;"
      >
        <el-table-column
            prop="projectName"
            label="项目名称"
            width="250">
        </el-table-column>
        <el-table-column
            prop="specialty"
            label="专业组">
        </el-table-column>
        <el-table-column
            prop="expert"
            label="评审专家">
        </el-table-column>
        <el-table-column
            prop="score"
            label="评分">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.score }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="submitTime"
            label="提交时间">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Chart from "chart.js/auto";

export default {
  data() {
    return {
      timeRange: 'week',
      recentActivities: [
        {
          projectName: '项目1',
          specialty: '专业组1',
          expert: '专家1',
          score: 4.5,
          submitTime: '2021-09-01 10:00:00'
        },
        {
          projectName: '项目2',
          specialty: '专业组2',
          expert: '专家2',
        }
      ]
    }
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    // 初始化图表
    initCharts() {
      try {
        // 评审进度图表
        const reviewProgressCtx = document.getElementById('reviewProgressChart').getContext('2d');
        new Chart(reviewProgressCtx, {
          type: 'bar',
          data: {
            labels: ['油气勘探', '油气藏工程', '钻采与地面工程', '信息工程'],
            datasets: [
              {
                label: '已评审项目',
                data: [18, 25, 12, 7],
                backgroundColor: '#1890ff'
              },
              {
                label: '未评审项目',
                data: [5, 8, 10, 4],
                backgroundColor: '#c9cdd4'
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              x: {
                stacked: true
              },
              y: {
                stacked: true,
                beginAtZero: true
              }
            }
          }
        });

        // 专家类别分布图表
        const expertCategoryCtx = document.getElementById('expertCategoryChart').getContext('2d');
        new Chart(expertCategoryCtx, {
          type: 'doughnut',
          data: {
            labels: ['公司领导', '公司副总及专家', '科研单位', '二级单位'],
            datasets: [{
              data: [20, 35, 25, 20],
              backgroundColor: ['#1890ff', '#52c41a', '#40a9ff', '#faad14']
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '70%'
          }
        });
      } catch (error) {
        console.error('图表初始化失败:', error);
      }
    }
  }
}
</script>
<style scoped>
.stats-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  margin-right: 15px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-card:last-child {
  margin-right: 0;
}

.stat-title {
  font-size: 14px;
  color: #86909c;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
}

.trend-up {
  color: #52c41a;
}

.trend-down {
  color: #ff4d4f;
}
</style>